<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <commodity-filter></commodity-filter>
      </el-header>
      <el-container>
        <el-aside width="300px" style="background-color: aqua">
          <commodity-list></commodity-list>
        </el-aside>
        <el-main style="background-color: yellow">
          <cv-table
            v-model:current-page="table.pageConfig.page"
            :page-config="table.pageConfig"
            :stripe="true"
            :is-show-page="true"
            :height="h * 0.8"
            :data="table.pageConfig.list"
            :config="tableColumn"
            :loading="table.loading.value"
            @add-data="add.toggle"
            @refresh="initTable"
            @current-change="initTable"
          >
          </cv-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import commodityFilter from './components/commodity-filter.vue'
import commodityList from './components/commodity-list.vue'
import {
  GoodsFilterType,
  GoodListDetailType,
  getGoodsListInfo,
} from '@/api/goods/admin-goods-list'
import type { TableConfig } from '@/packages/components'
import useVisible from '@/hooks/useVisible'
import { useAppStore } from '@/store'
import { useTable } from '@/hooks' //表格操作
const table = useTable()
const add = useVisible()

// 高度
const h = ref(1000)
h.value = window.innerHeight
onresize = () => {
  h.value = window.innerHeight
}

const { permissionList } = useAppStore()
const tableColumn = reactive<TableConfig<GoodListDetailType>>({
  permissionList,
  columns: [
    {
      type: 'txt',
      prop: 'id',
      label: '店铺编号',
    },
    {
      type: 'tag',
      prop: 'state',
      label: '状态',
      tag: [
        {
          4: ['danger', '审核拒绝'],
          3: ['success', '申请中'],
          2: ['success', '申请开店'],
          1: ['success', '开启中'],
          0: ['danger', '店铺关闭'],
        },
      ],
    },
  ],
  action: [
    {
      type: 'edit',
      title: '查看',
      auth: ['sys:store:audit:detail'],
      onClick: (row) => {
        console.log(111)
      },
    },
  ],
})

/**
 * 定义搜索框初始值
 */
const storeSearch = ref<GoodsFilterType>({
  goodsId: '',
  goodsName: '',
  menuId: '',
  state: '',
})
/**
 * 加载表格数据
 */
const initTable = table.initTableData(async (c) => {
  const res = await getGoodsListInfo({
    ...storeSearch.value,
  })
  c.setPageData(res)
})
</script>
<style lang="scss" scoped>
.common-layout {
  width: 100%;
  height: 100%;

  box-sizing: border-box;
  padding: 10px;
  display: flex;
  position: relative;

  .box1 {
    height: 100%;
    background-color: var(--el-bg-color);
    box-sizing: border-box;
    padding: 15px;
    border-radius: 5px;
    overflow: hidden;
  }

  .goods-add {
    width: 100%;
    height: 100%;
    background-color: var(--el-bg-color);
    box-sizing: border-box;
    padding: 15px;
    border-radius: 5px;
    overflow: hidden;
  }
}
</style>
